<template>
	<view>
		<uni-card padding="0" spacing="0">
			<template v-slot:cover>
				<view class="custom-cover">
					<view class="avatar">
						<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
							file-mediatype="image" v-model="avatar" @select="uploadCard">选择</uni-file-picker>
						<view class="nick-name">昵称</view>
					</view>
				</view>
			</template>
			<uni-list>
				<uni-list-item title="今日新闻" showArrow @click ="jump"></uni-list-item>
				<uni-list-item title="今日新闻" showArrow></uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const imageStyles = reactive({
		width: 64,
		height: 64,
		border: {
			radius: '50%'
		}
	})
	const avatar = reactive([{
		"name": "unicloudlogo.png",
		"extname": "png",
		"url": 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
	}])
	const uploadCard = (e) => {
		console.log(e)
	}
	const jump = () => {
		console.log(11)
		uni.navigateTo({
			url: '/pages/list/test'
		});
	}
</script>

<style>
	.custom-cover {
		height: 140rpx;
	}

	.avatar {
		margin-top: 30rpx;
		margin-left: 40rpx;
	}

	.nick-name {
		position: absolute;
		left: 22%;
		top: 18%
	}
</style>